<%@ page import="java.util.List" %>
<%@ page import="com.space.entity.City" %>
<%--@elvariable id="flightCount" type="java.lang.Integer"--%>
<%--@elvariable id="today" type="java.lang.Integer"--%>
<%--@elvariable id="userCount" type="java.lang.Integer"--%>
<%--@elvariable id="hotCityList" type="java.util.List"--%>
<%--@elvariable id="hotFlightMap" type="java.util.Map"--%>
<%--@elvariable id="allCityList" type="java.util.List"--%>
<%--@elvariable id="userLogin" type="com.space.entity.User"--%>
<%--@elvariable id="allCityList" type="java.util.List"--%>
<%--
  Created by IntelliJ IDEA.
  User: 20064
  Date: 2020/2/13
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>旅行者|订票|购票</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 字体 -->
    <%--    <link href="https://fonts.font.im/css?family=Ruslan+Display" rel="stylesheet">--%>

    <!-- 图标 -->
    <link rel="icon" type="image/png" sizes="144x144" href="../images/airplane.png"/>
    <link rel="apple-touch-icon" type="image/png" sizes="144x144" href="../images/airplane.png"/>
    <link href="../js/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 其他 -->
    <link rel="stylesheet" href="../js/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <%--    <link rel="stylesheet" href="../css/bootstrap-datepicker.min.css">--%>

    <!-- js -->
    <script type="text/javascript" src="../js/jquery-3.4.1/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".row-right").fadeIn(1000);
        })
    </script>
    <style type="text/css">
        /*.my-title p {*/
        /*    color: #95999c;*/
        /*}*/
    </style>

</head>
<body>
<%
    String today = (String) session.getAttribute("today");
    if (today == null || "".equals(today)) {
        response.sendRedirect("getHotCity.do");
    }
%>

<div class="bg"></div>
<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="w-100 my-nav">
            <nav>
                <div class="header-title">
                    <a href="#" data-toggle="tooltip" data-placement="left"
                       title="ALL BY 港某人">旅行者<em style="color:red;">。</em></a>
                </div>
                <div class="time"></div>
                <br>
                <div class="header-nav">
                    <c:if test="${userLogin==null}">
                        <a href="./userLogin.jsp">登录</a>
                        <a href="./register.jsp">还没有账号？</a>
                    </c:if>
                    <c:if test="${userLogin!=null}">
                        <a href="#" data-toggle="popover" data-placement="right"
                           data-content="<a href='getAllExpense.do'>查询订单</a><br>
                       <a href='userInfo.jsp'>修改资料</a><br>
                       <a href='userExitSystem.do'>注销</a>"
                           data-html="html">欢迎${userLogin.userAccount}<i class="fa fa-angle-right fa-fw"></i></a>
                    </c:if>
                </div>
            </nav>
        </div>

    </div>
    <div class="row">
        <div class="row3">
            <div class="row-left">
                <p>人生就像一场旅行，不必在乎目的地，</p>
                <p>在乎的是沿途的风景以及看风景的心情，让心灵去旅行。</p>
            </div>
            <div class="row-right shadow-lg">
                <div class="my-form">
                    <div>
                        <h5>BOOK A TRIP</h5>
                        <hr>
                    </div>
                    <form action="searchFlight.do" method="get">
                        <div class="form-group">
                            <input type="text" name="flightStartArea" placeholder="选一个地点出发" class="form-control"
                                   list="flightStartAreaList" required="required">
                            <datalist id="flightStartAreaList">
                                <c:forEach items="${allCityList}" var="city">
                                    <option>${city.cityName}</option>
                                </c:forEach>
                            </datalist>
                        </div>
                        <div class="form-group">
                            <input type="text" name="flightEndArea" placeholder="去哪儿？" class="form-control"
                                   list="flightEndAreaList" required="required">
                            <datalist id="flightEndAreaList">
                                <c:forEach items="${allCityList}" var="city">
                                    <option>${city.cityName}</option>
                                </c:forEach>
                            </datalist>
                        </div>
                        <div class="form-group">
                            <label for="flightStartTime">出发时间</label>
                            <input class="form-control" type="date" id="flightStartTime" name="flightStartTime"
                                   required="required" value="<%=today%>" min="<%=today%>">
                        </div>
                        <button type="submit" class="btn btn-success">GO</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="row-flight w-100">
            <div class="card shadow-lg w-100">
                <div class="card-header">
                    <h2>热门航班</h2>
                </div>
                <div class="card-body">
                    <c:if test="${hotCityList==null}">
                        <h1 class="text-center">抱歉 暂时没有航班 请联系管理员</h1>
                    </c:if>
                    <c:forEach items="${hotCityList}" var="city">
                        <div class="my-title">
                            <p>${city.cityName}</p>
                        </div>
                        <div class="rounded flight-info">
                            <table class="table text-center">
                                <c:forEach items="${hotFlightMap}" var="map">
                                    <c:if test="${map.key==city.cityId}">
                                        <c:forEach items="${map.value}" var="flight">
                                            <tr>
                                                <td>
                                                    <mark>${flight.flightStartArea.cityName}</mark>
                                                </td>
                                                <td><i class="fa fa-plane fa-lg fa-fw"></i></td>
                                                <td>
                                                    <mark>${flight.flightEndArea.cityName}</mark>
                                                </td>
                                                <td>|</td>
                                                <td style="padding-left: 20px;margin-right: 0;">
                                                    <mark>${flight.flightStartTime}</mark>
                                                </td>
                                                <td style="padding-left: 0;">
                                                    <i class="fa fa-chevron-right fa-lg fa-fw"></i></td>
                                                <td>
                                                    <mark>${flight.flightEndTime}</mark>
                                                </td>
                                                <td>
                                                    <button class="btn btn-info" type="button"
                                                            onclick="book(${flight.flightId})">预定
                                                    </button>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </c:if>
                                </c:forEach>
                            </table>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="">
            <p>总航班：${flightCount}</p>
            <p>总用户：${userCount}</p>
        </div>
        <div class="text-center w-100">
            <p>&copy; 2020/3/6</p>
        </div>
    </div>

</div>

</body>

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    init();

    function init() {
        getHotCity();
        setInterval(setTime, 1000);
        $('[data-toggle="popover"]').popover({
            html: true
        });
        $('[data-toggle="tooltip"]').tooltip();

    }

    function setTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = setCorrectTime(date.getHours());
        var minute = setCorrectTime(date.getMinutes());
        var second = setCorrectTime(date.getSeconds());
        $(".time").text(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second);

        function setCorrectTime(num) {
            if (num < 10) {
                num = "0" + num;
            }
            return num;
        }
    }

    function getHotCity() {
        $.ajax({
            url: "getHotCity.do",
            type: "post"
        });
    }

    function book(flightId) {
        location.href = "bookFlight.do?flightId1=" + flightId;
    }

</script>
</html>
